<template>
	<view class="page">
		<view class="title">
			4.7.使用defineExpose暴漏子组件的属性及方法
		</view>
		<view class="p">
			官网链接API
			<uni-link href="https://cn.vuejs.org/guide/essentials/template-syntax.html" text="模板语法"
				color="#007BFF"></uni-link>
		</view>
		<view class="p">
			defineExpose的主要应用场景是父子组件通信
		</view>
		<view class="p">
			父组件调用子组件方法：在一些需要父组件主动触发子组件特定行为的场景中会用到。比如在一个表单编辑页面，子组件是一个日期选择器，父组件需要在点击某个按钮时，调用子组件的方法来打开日期选择弹窗，这时就可以在子组件中使用defineExpose()暴露打开弹窗的方法，供父组件调用。
		</view>
		<view class="p">
			父组件访问子组件数据：当子组件中有一些数据需要提供给父组件使用，但又不想通过props和emit的常规方式传递时，可以使用defineExpose()。例如子组件是一个数据统计组件，内部计算好了一些统计数据，父组件需要获取这些数据进行进一步的处理或展示，就可以在子组件中通过defineExpose()暴露这些数据。
		</view>
		<view class="p">
			{{count}}
		</view>
		<Expose ref="child"></Expose>
		<button @click="update">数据+++</button>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue'
	const child = ref(null);

	const update = () => {
		child.value.numadd()
	}
</script>

<style lang="scss" scoped>

</style>